<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{ width: 400px; height: 300px; text-align: center; font: size 18px; background-color: white; border: 1px solid black; margin: 100px;line-height: 200px; }
    </style>
    <script>
        function randomColor(){
            var str = "rgba("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+",1)"
            return str
        }
        function getStyle(node,cssStyle){
        return node.currentStyle?node.currentStyle[cssStyle]:getComputedStyle(node)[cssStyle]
        //currentStyle为IE
        //getComputedStyle为火狐，谷歌
    }

        console.log(randomColor())
        

        window.onload = function(){
            var oDiv = document.getElementById("div1")
            console.log(oDiv.style.color)
            var count = 0
            var speed = 5
            setInterval(function(){
                oDiv.style.color = randomColor()
                var iCur = parseInt(getStyle(oDiv,'fontSize'))
                oDiv.style.fontSize = speed + iCur + 'px';
                count++;
                if(count % 6 ==0){
                    speed*=-1;
                }
            },1000)
        }
    </script>
</head>
<body>
    <div id = "div1">
        DIV
    </div>
</body>
</html>